<template>
  <div class="page-account-plugin">
    <t-row :gutter="20">
      <t-col :xs="6" :sm="4" :lg="3" :xl="2" v-for="item in accountStore.getPlugin()">
        <div class="item flash" @click="$router.push(item.url())">
          <img :src="item.img()" />
          <div class="name">
            {{ item.name() }}
          </div>
          <div class="ok" v-if="item.ok">
            <t-icon name="check-circle-filled" />
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
  import { ref, nextTick } from 'vue'
  import app from '@/app'
  import accountStore from '@/store/account'

</script>

<style lang="scss">
  @import '@/style/global';

  .page-account-plugin{
    padding-top: 20px;
    .item{
      margin-bottom: 20px;
      padding: 20px;
      text-align: center;
      position: relative;
      cursor: pointer;

      .name{
        padding-top: 8px;
        color: $color-title;
        font-size: 14px;  
      }
      img{
        margin: 0 auto;
        height: 100px;   
        transform: perspective(1px) translateZ(0);
        transition-duration: 0.3s;

        &:hover{
          transform: scale(1.1);
        }
      }
    }
  }
</style>